<template>
<!-- 系统管理员账号 -->
    <div class="number">
        <header>
            <h4>员工账号管理</h4>
            <div class="add">
                <el-select v-model="value6" placeholder="所有" size="mini">
                    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                    </el-option>
                </el-select>
                <el-button type="primary" @click="dialogVisible = true" size="mini">新增员工账号</el-button>
                <el-dialog title="新增员工账号" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
                    <m-content></m-content>
                    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
                </el-dialog>
            </div>
        </header>
<!-- ：data设置分页 -->
        <el-table  :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  style="width: 100%">
            <el-table-column prop="admin" label="账号" width="100">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="number" label="手机号">
            </el-table-column>
            <el-table-column prop="root" label="权限组"> </el-table-column>
            <el-table-column prop="status" label="状态">
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <!-- 添加后 slot-scope="scope"后显示文字 -->
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">锁定</el-button>
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">重置密码</el-button>
                </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
<div class="pagination">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[1, 2, 3, 4]"
    :page-size="pagesize"
    layout="prev, pager, next"
    :total='4'>
   </el-pagination>
    </div>
    </div>
</template>     
<script>
    import addModel from '../comm/addmodel.vue'
    export default {
        data() {
            return {
                currentPage:1,
                pagesize:1,
                cities: [{
                        value: "Beijing",
                        label: "北京"
                    },
                    {
                        value: "Shanghai",
                        label: "上海"
                    },
                    {
                        value: "Nanjing",
                        label: "南京"
                    },
                    {
                        value: "Chengdu",
                        label: "成都"
                    },
                    {
                        value: "Shenzhen",
                        label: "深圳"
                    },
                    {
                        value: "Guangzhou",
                        label: "广州"
                    }
                ],
                tableData: [{
                    admin: 'admin',
                    name: '王小虎1',
                    number: '15730000001',
                    root: '系统管理员',
                    status: '正常',
                    operate: ''
                }, {
                    admin: 'admin',
                    name: '王小虎2',
                    number: '15730000001',
                    root: '系统管理员',
                    status: '正常',
                    operate: ''
                }, {
                    admin: 'admin',
                    name: '王小虎3',
                    number: '15730000001',
                    root: '系统管理员',
                    status: '正常',
                    operate: ''
                }, {
                    admin: 'admin',
                    name: '王小虎4',
                    number: '15730000001',
                    root: '系统管理员',
                    status: '正常',
                    operate: ''
                }],
                value6: "",
                dialogVisible: false
            };
        },
        methods: {
            handleClose(done) {            
                        done();     
            },
            　handleSizeChange(val) {
        this.pagesize = val;

      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
        },
        components: {
            'm-content': addModel
        }
    };
</script>
<style lang="scss">
    .number {
        font-size: 14px;
    }
    header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        h4 {
            font-weight: 500;
        }
    }
    .el-table-column button {
        border: none;
        color: #009688;
    }
    .roootPer {
        font-size: 12px;
        border: 1px solid #ccc;
        color: #ccc;
    }
    .el-button--text {
        color: #009688;
    }
    .el-button--primary {
        background-color: #009688;
    }
    .el-select .el-input.is-focus .el-input__inner {
        border-color: #009688 !important;
    }
    .el-select .el-input__inner:focus {
    border-color: #009688 !important;
}
.el-select-dropdown__item.selected {
    color: #009688 !important;
    font-weight: 700;
}

</style>
